<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>仪表盘</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <div style="display: inline-block;padding: 20px;">
      <h3 style="text-align: left">订单简览柱状图:</h3>
      <div style="width: 400px;height: 450px" id="order">
      </div>
    </div>

    <div style="display: inline-block;padding: 20px;">
      <h3 style="text-align: left">用户反馈简览柱状图:</h3>
      <div style="width: 400px;height: 450px" id="feedback">
      </div>
    </div>

    <div style="display: inline-block;padding: 20px;">
      <h3 style="text-align: left; display: inline-block;padding-right: 200px;">用户简览柱状图:</h3>
      <h4 style="text-align: left;display: inline-block;">用户总数: {{ this.sum }}</h4>
      <div style="width: 400px;height: 450px" id="user">
      </div>
    </div>

  </div>
</template>

<script>
//通过this.$echarts来使用
export default {
  name: "page",
  data() {
    return {
      sum: 100,
      orderList:[],
      feedbackList:[],
      userList:[]
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
      this.initOrderCharts();
      this.initFeedbackChart();
      this.getSumUser();
      this.initUserChart();
      },
    getWaitOrder() {
      let url = 'http://localhost:9080/count/order-wait';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('等待接单数据->>>>' + response.data.data);
        this.orderList[0]=response.data.data;
      });
    },
    getTransportOrder() {
      let url = 'http://localhost:9080/count/order-transport';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('派送中订单数据->>>>' + response.data.data);
        this.orderList[1]=response.data.data;
      });
    },
    getWaitFeedback() {
      let url = 'http://localhost:9080/count/feedback-wait';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('等待处理的反馈数据->>>>' + response.data.data);
        this.feedbackList[0]= response.data.data;
      });
    },
    getProcessFeedback() {
      let url = 'http://localhost:9080/count/feedback-process';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('等待处理的反馈数据->>>>' + response.data.data);
        this.feedbackList[1]= response.data.data;
      });
    },
    getSumUser(){
      let url = 'http://localhost:9080/count/user';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('用户总数数据->>>>' + response.data.data);
        this.sum=response.data.data;
      });
    },
    getOpenUser(){
      let url = 'http://localhost:9080/count/user-enable';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log('启用用户数量->>>>' + response.data.data);
        this.userList[0]=response.data.data;
      });
    },

    initOrderCharts() {
      let orderChar = this.$echarts.init(document.getElementById('order'));
      //处理订单图表
      this.getWaitOrder();
      this.getTransportOrder();

      setTimeout(()=>{
        let completeUrl = 'http://localhost:9080/count/order-complete';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(completeUrl).then((response) => {
          console.log('已完成订单数据->>>>' + response.data.data);
          this.orderList[2]=response.data.data;
          orderChar.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['等待接单', '派送中', '已完成'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: this.orderList
              }
            ]
          });
        })
      },500)
    },

    initFeedbackChart() {
      let feedbackChar = this.$echarts.init(document.getElementById('feedback'));
      //处理反馈图表
      this.getWaitFeedback();
      this.getProcessFeedback();
      setTimeout(()=>{
        let completeUrl = 'http://localhost:9080/count/feedback-complete';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(completeUrl).then((response) => {
          console.log('已完成反馈数据->>>>' + response.data.data);
          this.feedbackList[2]=response.data.data;
          feedbackChar.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['等待处理', '处理中', '处理完成'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: this.feedbackList
              }
            ]
          });
        });
      },500)
    },

    initUserChart(){
      //处理用户图表
      this.getOpenUser()
      let userChar = this.$echarts.init(document.getElementById('user'));
      setTimeout(()=>{
        let url = 'http://localhost:9080/count/user-disable';
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          console.log('禁用用户数据->>>>' + response.data.data);
          this.userList[1]=response.data.data;
          userChar.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['已开启', '已禁用'],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: this.userList
              }
            ]
          });
        });
      },500)
    }
  }
}
</script>
